<template>
  <div class="app-container">
    <div class="app-container-main">
      <div class="main-card-header">
        会员列表
      </div>
      <div class="main-card-body">
        <div class="list-search">
          <div class="list-options">
            <a-select v-model:value="searchlist.status"  style="width:100%" @change="handleSearchChange()">
              <a-select-option value='不限会员状态'>不限会员状态</a-select-option>
              <a-select-option value='已锁定'>已锁定</a-select-option>
            </a-select>
          </div>
          <div class="list-options">
            <a-select v-model:value="searchlist.reg_time" style="width:100%" @change="handleSearchChange">
              <a-select-option value='按注册时间排序'>按注册时间排序</a-select-option>
              <a-select-option value='按登录时间排序'>按登录时间排序</a-select-option>
            </a-select>
          </div>
          <div class="list-options">
            <a-select v-model:value="searchlist.reg_time_day" style="width:100%" @change="handleSearchChange">
              <a-select-option value='不限注册时间'>不限注册时间</a-select-option>
              <a-select-option value='3天内'>3天内</a-select-option>
              <a-select-option value='7天内'>7天内</a-select-option>
              <a-select-option value='15天内'>15天内</a-select-option>
              <a-select-option value='30天内'>30天内</a-select-option>
            </a-select>
          </div>
          <div class="list-options">
            <a-select v-model:value="searchlist.reg_time_source" style="width:100%" @change="handleSearchChange">
              <a-select-option value='不限注册来源'>不限注册来源</a-select-option>
              <a-select-option value='APP'>APP</a-select-option>
              <a-select-option value='手机浏览器'>手机浏览器</a-select-option>
              <a-select-option value='微信浏览器'>微信浏览器</a-select-option>
              <a-select-option value='微信小程序'>微信小程序</a-select-option>
              <a-select-option value='抖音小程序'>抖音小程序</a-select-option>
              <a-select-option value='电脑浏览器'>电脑浏览器</a-select-option>
            </a-select>
          </div>
          <div class="list-options">
            <a-select v-model:value="searchlist.iswechat" style="width:100%" @change="handleSearchChange">
              <a-select-option value='不限微信绑定'>不限微信绑定</a-select-option>
              <a-select-option value='已绑定微信'>已绑定微信</a-select-option>
              <a-select-option value='未绑定微信'>未绑定微信</a-select-option>
            </a-select>
          </div>
          <div class="list-options">
            <a-select v-model:value="searchlist.email" style="width:100%" @change="handleSearchChange">
              <a-select-option value='不限邮箱绑定'>不限邮箱绑定</a-select-option>
              <a-select-option value='已绑定邮箱'>已绑定邮箱</a-select-option>
              <a-select-option value='未绑定邮箱'>未绑定邮箱</a-select-option>
            </a-select>
          </div>
          <div class="select-inp">
            <div>
              <a-select v-model:value="searchlist.input_inner"  @change="handleSearchChange" style="width:100px">
                <a-select-option value='UID'>UID</a-select-option>
                <a-select-option value='用户名'>用户名</a-select-option>
                <a-select-option value='手机号'>手机号</a-select-option>
                <a-select-option value='企业名称'>企业名称</a-select-option>
              </a-select>
            </div>
            <a-input-search v-model:value="searchlist.search_value" placeholder="请输入搜索内容" style="width: 200px;height: 32px;border-left: 0px;" @search="onSearch" />
          </div>
        </div>
        <div class="table">
          <a-table :columns="columns" :data-source="companylist" :row-selection="rowSelection" :scroll="{ x: 1300, y: 1000 }" :rowKey="companylist => companylist.id" :pagination="false">
            <template #status="{ record }">
              <a-tag color="green" v-if="(record.status === 1)">正常</a-tag>
              <a-tag color="red" v-else>已锁定</a-tag>
            </template>
            <template #last_login_time="{ record }">
              <span v-if="(record.last_login_time === 0)"><history-outlined />从未登录</span>
              <span v-else>{{ record.last_login_time }}</span>
            </template>
            <template #action="{ record }">
              <a-button type="primary" size="small" @click="lookMen(record)">查看</a-button>
              <a-button type="primary" size="small" @click="showEditModal(record)">修改</a-button>
              <!-- <a-button type="primary" size="small">删除</a-button> -->
              <a-dropdown :placement="bottom">
                <a-button size="small"> ･ ･ ･</a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>
                      <a v-if="(record.status === 1)" @click="showConfirm(record)">
                        锁定
                      </a>
                      <a v-else @click="showConfirm(record)">解锁</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a @click="deletemem(record)">
                        删除
                      </a>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </a-table>
        </div>
        <div class="row">
          <div class="row-button">
            <a-button type="primary" @click="showAddModal">添加会员</a-button>
            <a-button type="primary" danger @click="batchDeletemem">删除所选</a-button>
          </div>
          <div class="row-pagination">
            <a-pagination v-model:current="page" :page-size-options="pageSizeOptions" :total="count"
              :show-total="total => `Total ${total} items`" show-size-changer show-quick-jumper :page-size="pagesize"
              @showSizeChange="onShowSizeChange" @change="onCurrentChange">
              <template #buildOptionText="props">
                <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                <span v-else>全部</span>
              </template>
            </a-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增的模态框 -->
    <a-modal  v-model:visible="addvisible" title="添加【企业】会员" @ok="handleAddOk" @cancel="cancelAddForm" centered="true">
      <a-form  ref="formRef" :rules="rules" :model="addformState" :label-col="labelCol">
        <a-form-item  label="用户名" name="username">
          <a-input v-model:value="addformState.username" />
        </a-form-item>
        <a-form-item  label="手机号" name="mobile">
          <a-input v-model:value="addformState.mobile" />
        </a-form-item>
        <a-form-item label="密码" name="password">
          <a-input-password  />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 修改的模态框 -->
    <a-modal v-model:visible="editvisible" title="编辑会员" @ok="handleEditOk" @cancel="cancelAddForm" centered="true">
      <a-form ref="formRef" :rules="rules" :model="editformState" :label-col="labelCol">
        <a-form-item label="用户名" name="username">
          <a-input v-model:value="editformState.username" />
        </a-form-item>
        <a-form-item label="手机号" name="mobile">
          <a-input v-model:value="editformState.mobile" />
        </a-form-item>
        <a-form-item label="密码" name="password">
          <a-input-password placeholder="如不修改请留空"/>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 查看会员 -->
    <a-modal v-model:visible="lookvisible" title="查看会员" :footer="null" centered="true">
      <div class="lookmem">
        <div>
          <label>UID</label>
          <span>{{ lookform .id}}</span>
        </div>
        <div>
          <label>身份</label>
          <span>{{ lookform.identity }}</span>
        </div>
        <div>
          <label>用户名</label>
          <span>{{ lookform.username}}</span>
        </div>
        <div>
          <label>手机号</label>
          <span>{{ lookform .mobile}}</span>
        </div>
        <div>
          <label>注册时间</label>
          <span>{{ lookform.reg_time }}</span>
        </div>
        <div>
          <label>最近登录</label>
          <span>{{ lookform.last_login_time }}</span>
        </div>
        <div>
          <a-button @click="closeLook">关闭</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref, reactive, createVNode } from "vue"
import { HomeOutlined, HistoryOutlined, ExclamationCircleOutlined  } from '@ant-design/icons-vue'
import { message ,Modal } from 'ant-design-vue'; 
import { useRoute } from "vue-router"
import { getmem, addmem, updatemem, delmem }  from '@/api/member'


export default defineComponent({
  components: {
    HomeOutlined,
    HistoryOutlined
  },
  computed: {

  },
  emits: [],
  props: {
  },
  setup() {
    const companylist=ref([])
    const nowtime=ref('')
    const count=ref(0)//数据总数
    const pageSizeOptions = ref(['1', '3', '5', '7', '9']);
    const page = ref(1);//页数
    const pagesize = ref(3);//条目数
    const lookvisible = ref(false);
    const addvisible = ref(false);
    const editvisible = ref(false);
    const batchIdlist=ref([])

    const searchlist = reactive({
      status:'不限会员状态',
      reg_time:'按注册时间排序',
      reg_time_day: '不限注册时间',
      reg_time_source:'不限注册来源',
      iswechat:'不限微信绑定',
      email:'不限邮箱绑定',
      input_inner:'UID',
      search_value:""
    });

    const formRef = ref();

  
    //表单验证
    const rules = {
      username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    };

    //当前时间
    const getNowTime=()=> {
      let dt = new Date()
      var y = dt.getFullYear()
      var mt = (dt.getMonth() + 1).toString().padStart(2, '0')
      var day = dt.getDate().toString().padStart(2, '0')
      var h = dt.getHours().toString().padStart(2, '0')
      var m = dt.getMinutes().toString().padStart(2, '0')
      nowtime.value = y + "-" + mt + "-" + day + " " + h + ":" + m
    }

    const addformState = reactive({
      username: '',
      mobile: '',
      reg_time: '',
      utype:0,
      platform_id:1
    });

    const editformState = reactive({
      id:'',
      username: '',
      mobile: ''
    });
    //添加表单事件
    const handleAddOk = () => {
      getNowTime()
      addformState.reg_time = nowtime.value
      addmem(addformState).then((res) => {
        console.log(res.status);
        if (res.status === 201) {
          message.success('添加成功');
          addvisible.value = false;
          getCompanylist()
        }else{
          message.success('添加失败');
        }
      })
    }

    //修改会员
    const handleEditOk = () => {
      updatemem(editformState.id, editformState).then((res) => {
        if (res.status = 200) {
          message.success('修改成功');
          getCompanylist()
          editvisible.value = false
        }else{
          message.success('修改失败');
        }
      })
    }
   

    const lookform=reactive({
      id:'',
      identity:'企业会员',
      username:'',
      mobile:'',
      reg_time:'',
      last_login_time:'从未登录'
    })

    //查看
    const lookMen = (record) => {
      lookvisible.value=true
      console.log(record);
      lookform.id = record.id
      lookform.username = record.username
      lookform.mobile = record.mobile
      lookform.reg_time = record.reg_time
    }

    //关闭查看
    const closeLook=()=>{
      lookvisible.value = false
    }

    //添加表单的取消
    const cancelAddForm = () => {
      formRef.value.resetFields();
    }

    //展示添加会员的模态框
    const showAddModal=()=>{
      addvisible.value = true;
    }

    //展示编辑会员的模态框
    const showEditModal = (record) => {
      editvisible.value = true;
      editformState.id = record.id
      editformState.username = record.username
      editformState.mobile = record.mobile
    }

    //锁定会员
    const showConfirm = (record) => {
      let text=''
      if(record.status===1){
        text='锁定'
      }else{
        text = '解锁'
      }
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode('div', { style: 'color:red;' }, `确定${text}该会员吗`),
        centered:true,
        onOk() {
          let status=0
          if (record.status===0){
            status=1
          }else{
            status = 0
          }
          updatemem(record.id, { status: status }).then((res) => {
            if (res.status = 200) {
              getCompanylist()
            }
          })
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      });
    };

    //删除会员
    const deletemem = (record) => {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode('div',{ style: 'color:black;' } , '删除企业会员将删除此会员的一切信息，包括企业资料、在招职位、下载的简历等，删除后不可恢复。是否继续？'),
        centered: true,
        onOk() {
          delmem(record.id).then((res) => {
            console.log(res);
            if (res.status = 204) {
              getCompanylist()
              message.success('删除成功');
            }
          })
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      });
    };

    const onSearch = (searchValue) => {
      console.log('use value', searchValue);
      console.log('or use this.value', value.value);
    };

    const onChange = (number) => {
      console.log('Page: ', pageNumber);
    };

    const rowSelection = ref({
      checkStrictly: false,
      onChange: (selectedRowKeys, selectedRows) => {
        batchIdlist.value = selectedRowKeys
      },
      onSelect: (record, selected, selectedRows) => {
        // console.log(record, selected, selectedRows,2);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        // console.log(selected, selectedRows, changeRows,3);
      },
    });


    //批量删除会员
    const batchDeletemem = () => {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode('div', { style: 'color:black;' }, '删除企业会员将删除此会员的一切信息，包括企业资料、在招职位、下载的简历等，删除后不可恢复。是否继续？'),
        centered: true,
        onOk() {
          companylist.value.forEach(item=>{
            batchIdlist.value.forEach(batchid=>{
              if (item.id === batchid){
                delmem(batchid).then((res) => {
                  console.log(res);
                  if (res.status = 204) {
                    getCompanylist()
                  }
                })
              }
            })  
          })
          
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      });
    };

    
    const handleSearchChange = (value)=>{
      console.log(value);

    }
    //获取会员数据
    const getCompanylist=()=>{
      let par = {
        utype:0,
        pagesize: pagesize.value,
        page: page.value
      }
      getmem(par).then(({data})=>{
        companylist.value = data.results
        count.value = data.count
      })
    }

    //pagesize 变化的回调
    const onShowSizeChange = (Page, pageSize) => {
      pagesize.value = pageSize;
      page.value = Page
      getCompanylist()
    };
    //页码改变的回调
    const onCurrentChange = (pageNumber) => {
      getCompanylist()
    };

    // 获取到的路由参数
    const Route = useRoute(); //获取到值

    onMounted(() => {
      getCompanylist()
    })

    const columns = [{
      title: 'UID',
      width: 100,
      dataIndex: 'id',
      key: 'id',
    }, {
      title: '企业名称',
      width: 200,
      dataIndex: 'companyname',
      key: 'companyname',
    }, {
      title: ' 用户名',
      dataIndex: 'username',
      key: 'username',
    }, {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile',
    }, {
      title: '注册时间',
      dataIndex: 'reg_time',
      key: 'reg_time',
      width: 150,
    }, {
      title: '最近登录',
      dataIndex: 'last_login_time',
      key: 'last_login_time',
      slots: { customRender: 'last_login_time' },
    }, {
      title: ' 会员状态',
      dataIndex: 'status',
      key: 'status',
      slots: { customRender: 'status' },
    }, {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 250,
      slots: { customRender: 'action' },
    }];
    return {
      searchlist,
      companylist,
      rules,
      addvisible,
      columns,
      onChange,
      onSearch,
      handleSearchChange,
      rowSelection,
      handleAddOk,
      cancelAddForm,
      addformState,
      formRef,
      showAddModal,
      count,
      page,
      pagesize,
      pageSizeOptions,
      onShowSizeChange,
      onCurrentChange,
      lookvisible,
      lookMen,
      lookform,
      closeLook,
      editvisible,
      handleEditOk,
      editformState,
      showEditModal,
      labelCol: { style: { width: '80px' } },
      showConfirm,
      deletemem,
      batchDeletemem
    }
  }
})
</script>

<style lang="scss" scoped>
.lookmem{
    margin-left: 40px;
    line-height: 40px;
    div{
      label{
        font-weight: 700;
        margin-right: 10px;
      }
      span{
        color: #606266;
      }
    }
}
</style>